<template>
  <div class="exam-web">
    <div class="md-1">
      <div class="bgcolor"></div>

      <div class="content">
        <div class="top">
          <h1>
            {{ detailData.fullName || "" }}
            <div class="time">
              <i class="el-icon-time"></i>
              {{ detailData.startDatetime || "" }}~{{
                detailData.endDatetime || ""
              }}
            </div>
          </h1>

          <div v-if="detailData.enabledMark == '0'" class="seal no"></div>
          <div v-if="detailData.enabledMark == '1'" class="seal pass"></div>
          <div class="fen">
            得分：
            <span>{{ detailData.maxScore }}</span> 分
          </div>
        </div>

        <div class="bottom">
          <div class="nums">
            <div class="tj">
              <p>
                {{ detailData.examLength || 30 }}
                <span>分钟</span>
              </p>
              <span>考试时长</span>
            </div>
            <div class="tj">
              <p>
                {{ detailData.paperInfo ? detailData.paperInfo.myScore : "0" }}
                <span>分</span>
              </p>
              <span>总分</span>
            </div>
            <div class="tj">
              <!-- <p>{{ sumPassScore() }} <span> 分 </span></p>
              -->
              <p>
                {{ detailData.paperInfo ? sumPassScore() : "0" }}
                <span>分</span>
              </p>
              <span>及格分</span>
            </div>
            <div class="tj">
              <p v-if="detailData.examRepeat == 0">
                {{
                  1 - detailData.examTaskList.length > 0
                    ? 1 - detailData.examTaskList.length
                    : 0
                }}
                <span>次</span>
              </p>
              <p
                v-else-if="
                  detailData.examRepeat == 1 &&
                  detailData.examRepeatType == 'before'
                "
              >
                <span>不限次</span>
              </p>
              <!-- 允许重复考试 custom-自定义重考次数 -->
              <p
                v-else-if="
                  detailData.examRepeat == 1 &&
                  detailData.examRepeatType == 'custom'
                "
              >
                {{
                  detailData.examRepeatNum + 1 - detailData.examTaskList.length
                }}
              </p>
              <span>剩余次数</span>
            </div>

            <div class="tj">
              <p>
                {{ detailData.examTaskList.length }}
                <span>次</span>
              </p>
              <span>已考次数</span>
            </div>
          </div>
          <div
            class="btn"
            @click="goExam()"
            v-if="
              (new Date().getTime() <
                new Date(detailData.endDatetime).getTime() &&
                detailData.examRepeat == 0 &&
                detailData.examTaskList.length < 1) ||
              (detailData.examRepeat == 1 &&
                (detailData.examRepeatType == 'before' ||
                  (detailData.examRepeatType == 'custom' &&
                    detailData.examRepeatNum + 1 >
                      detailData.examTaskList.length)))
            "
          >
            <el-button type="primary">去考试</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="md-2">
      <div class="content">
        <div class="box">
          <h5>考试规则</h5>
          <div class="vox">
            <div class="dot">●</div>
            <p>
              切屏次数：
              <span style="color: #2a8ff7">{{
                detailData.preventionToggleScreen || "无限次"
              }}</span>
            </p>

            <p style="margin-left: 100px">
              注：超过切屏次数规则系统会强制交卷。
            </p>
          </div>

          <div class="vox">
            <div class="dot">●</div>
            <p>
              考试记录查看:
              <span v-if="detailData.examAnswers == 'submitAfter'"
                >交卷后可查看答卷。</span
              >
              <span v-if="detailData.examAnswers == 'passAfter'"
                >及格后可查看答卷。</span
              >
              <span v-if="detailData.examAnswers == 'examAfter'"
                >考试结束后可查看答卷。</span
              >
              <span v-if="detailData.examAnswers == 'notAllow'"
                >不允许查看答卷。</span
              >
            </p>
          </div>

          <div class="vox">
            <div class="dot">●</div>
            <p>强制交卷规则：</p>

            <p>
              （1）进入答题界面开始计时, 倒计时结束未自主交卷则系统强制交卷；
              <br />（2）进入答题界面开始计时，未交卷退出答题界面，考试用时会继续计时，用时结束系统会强制交卷。
              <br />（3）开始考试后，切出去时间超过
              <span style="color: rgb(42, 143, 247)">{{
                detailData.preventionToggleScreenSecond
                  ? detailData.preventionToggleScreenSecond + "秒"
                  : "无限制"
              }}</span>
              系统会强制交卷。
            </p>
          </div>

          <div class="vox">
            <div class="dot">●</div>
            <p>
              通过后是否允许参加考试：
              {{ detailData.examPass == 1 ? "允许" : "不允许" }}。
            </p>
          </div>
        </div>
        <div class="box">
          <h5>考试说明</h5>
          <div v-if="detailData.description">{{ detailData.description }}</div>
          <el-empty v-else description="暂无说明"></el-empty>
        </div>
        <div class="box">
          <h5>考试记录</h5>

          <div class="history">
            <div
              class="item"
              v-for="(item, index) in detailData.examTaskList"
              :key="index"
              @click="goExamDetail(item.id)"
            >
              <p>考试时间：{{ item.startTime }}</p>
              <p>交卷时间：{{ item.submitTime }}</p>
              <p>考试用时：{{ detailData.examLength }}min</p>

              <div
                class="status"
                :style="`color:${
                  item.enabledMark == 0 ? '#f65464' : 'rgb(23, 184, 126)'
                }`"
              >
                {{ item.enabledMark == 0 ? "未通过" : "已通过" }}
              </div>

              <div class="fen">
                <span>{{ item.myScore }}</span> 分
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      id: "",
      courseId: "",
      detailData: {},
      url: "",
      chooseLiData: {},
      activeName: "first",
      keList: [],
      search: {
        currentPage: 1,
        pageSize: 6,
        sidx: "",
        sort: "desc",
      },
    };
  },
  created() {
    this.id = this.$route.query.id;
    if (this.$route.query.courseId) {
      this.courseId = this.$route.query.courseId;
    }
    this.getDetail(this.id);
  },
  methods: {
    goExam() {
      this.$router.push(
        "/examWeb/detail?id=" + this.id + "&courseId=" + this.courseId
      );
    },
    goExamDetail(taskId) {
      // <span v-if="detailData.examAnswers == 'submitAfter'">交卷后可查看答卷。</span>
      //         <span v-if="detailData.examAnswers == 'passAfter'">及格后可查看答卷。</span>
      //         <span v-if="detailData.examAnswers == 'examAfter'">考试结束后可查看答卷。</span>
      //         <span v-if="detailData.examAnswers == 'notAllow'">不允许查看答卷。</span>
      if (this.detailData.examAnswers == "notAllow") {
        this.$message.info("该考试不允许查看答卷！");
        return;
      }

      if (this.detailData.examAnswers == "passAfter") {
        if (this.detailData.enabledMark == 1) {
          this.$router.push("/examWeb/record?taskId=" + taskId + "&isdetail=1");
        } else {
          this.$message.info("该考试通过后才可查看答卷！");
          return;
        }
      }

      if (this.detailData.examAnswers == "submitAfter") {
        this.$router.push("/examWeb/record?taskId=" + taskId + "&isdetail=1");
      }

      if (this.detailData.examAnswers == "examAfter") {
        if (
          new Date().getTime() > new Date(this.detailData.endDatetime).getTime()
        ) {
          this.$router.push("/examWeb/record?taskId=" + taskId + "&isdetail=1");
        } else {
          this.$message.info("该考试结束后才可查看答卷！");
          return;
        }
      }

      if (!this.detailData.examAnswers) {
        this.$router.push("/examWeb/record?taskId=" + taskId + "&isdetail=1");
      }
      // this.$router.push("/examWeb/record?taskId=" + taskId + "&isdetail=1");
    },
    goback() {
      this.$router.go(-1);
    },

    getDetail() {
      request({
        url: "/api/exam/TemsExam/myExam/" + this.id,
        method: "get",
      }).then((res) => {
        this.detailData = res.data;
        this.loading = false;
      });
    },
    handleClick() {},
    // 计算 及格线
    sumPassScore() {
      let _passLine = this.detailData.passLine;
      _passLine = _passLine ? new Number(_passLine) : new Number(0);

      let _totalScore = this.detailData.paperInfo.myScore;
      _totalScore = _totalScore ? new Number(_totalScore) : new Number(0);
      return Math.round((_passLine * _totalScore) / 100);
    },
  },
};
</script>

<style lang="scss" scoped>
.md-1 {
  overflow: hidden;

  position: relative;
  // background: #191b1f;
  width: 100%;
  // height: 715px;
  color: #ccc;

  .bgcolor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: linear-gradient(90deg, #272f46, rgba(39, 47, 70, 0.8));
  }

  .content {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px 35px 40px 35px;
    position: relative;
    border-radius: 6px;
    height: 300px;
    margin-top: 80px;

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      overflow: hidden;

      .seal {
        position: absolute;
        top: 0;
        right: 0;
        width: 160px;
        height: 160px;
        background-size: cover;
      }

      .no {
        background-image: url(./images/exam-no.png);
      }

      .pass {
        background-image: url(./images/exam-ok.png);
      }

      h1 {
        color: #000;
        font-size: 35px;
      }

      .time {
        font-size: 20px;
        margin-top: 20px;
        color: #666;
      }
    }

    .fen {
      font-size: 16px;
      color: #000;

      span {
        color: rgb(255, 76, 80);
        font-size: 40px;
        font-weight: bolder;
      }
    }

    .bottom {
      margin-top: 30px;
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      border-top: 1px solid #e6e6e6;
    }

    .nums {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      width: 700px;

      .tj {
        flex: 1;
        position: relative;
        text-align: center;

        p {
          font-size: 36px;
          font-weight: 700;
          color: #2a8ff7;

          margin-bottom: 10px;
          letter-spacing: -0.04em;

          span {
            padding-left: 10px;
            color: #999;
          }
        }

        span {
          font-size: 14px;
          color: #000;
        }
      }

      .tj:nth-child(n + 2):before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 2px;
        height: 10px;
        background-color: #333;
      }
    }
  }
}

.md-2 {
  padding: 20px 0 80px;

  .content {
    width: 1200px;
    margin: 0 auto;
    background: #fff;
    padding: 0 28px 20px;
    border-radius: 6px;

    // .box {
    // }

    h5 {
      position: relative;
      margin: 0;
      padding: 20px 12px;
      font-size: 20px;
      font-weight: 550;
      color: #333;
    }

    h5:after {
      content: "";
      position: absolute;
      left: 0;
      top: 37%;
      width: 4px;
      height: 20px;
      border-radius: 2px;
      background-color: #2a8ff7;
    }

    .vox {
      .dot {
        // font-size: 60px;
        width: 3px;
        height: 3;
        border-radius: 50%;
        margin-right: 10px;
      }

      // height: 30px;
      line-height: 30px;
      padding-left: 12px;
      color: #666;
      font-size: 16px;
      display: flex;
      justify-content: flex-start;
      align-items: unset;
      flex-direction: row;
    }

    .history {
      .item {
        display: inline-block;
        width: 358px;
        padding: 20px 25px;
        font-size: 14px;
        border-radius: 4px;
        margin-bottom: 22px;
        margin-right: 22px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        background: #f5f5f6;

        p {
          margin: 0;
          line-height: 2.2;
          padding-left: 12px;
          color: #666;
          font-size: 14px;
        }

        .fen {
          position: absolute;
          right: 26px;
          bottom: 26px;
          font-size: 16px;

          font-weight: 700;
          letter-spacing: -0.04em;

          span {
            font-size: 30px;
          }
        }

        .status {
          position: absolute;
          color: #f65464;
          position: absolute;
          top: 26px;
          right: 3px;
          min-width: 100px;
          font-size: 16px;
          text-align: center;
        }
      }
    }
  }
}
</style>
